import React, { Component } from 'react';
import {
  StyleSheet, View, Image, Dimensions, ScrollView, DeviceEventEmitter, Alert, TouchableWithoutFeedback, TouchableOpacity,
} from 'react-native';
import { Text } from 'native-base';
import { produce } from 'immer';
import ZlstIcon from '../../../components/zlst-icons';
import Theme from '../../../native-base-theme/variables/commonColor';
import { UtilToast } from '../../../utils/util-method';
import * as changePartService from '../../../services/changePart';
import { FormText } from '../../../components';

class changePartInfo extends Component {
  static navigationOptions = {
    header: null,
  }

  lotCode = '';

  constructor(props) {
    super(props);
    this.state = {
      data: {},
    };
  }

  // 初始化
  componentDidMount() {
    if (this.props.navigation) { // 路由带入参数
      const par = this.props.navigation.state.params;
      this.getServerInfo(par.code);
    } else {
      this.swipeToDetailListhener = DeviceEventEmitter.addListener('swipeToDetail', this.queryInfoEvent);
    }
  }

  componentWillUnmount() {
    if (this.swipeToDetailListhener) {
      this.swipeToDetailListhener.remove();
    }
  }

  queryInfoEvent = (params) => {
    if (params) {
      this.getServerInfo(params.code);
    }
  }

  getServerInfo = async (lotCode) => {
    this.lotCode = lotCode;
    try {
      DeviceEventEmitter.emit('showLoading', true);
      const data = await changePartService.queryDownAccysInfo({ lotCode });
      DeviceEventEmitter.emit('showLoading', false);
      if (data) {
        this.setState(produce(draft => {
          // eslint-disable-next-line no-restricted-syntax
          draft.data = data;
        }));
      }
    } catch (e) {
      console.log(e);
      DeviceEventEmitter.emit('showLoading', false);
    }
  }

  _refresh = () => {
    this._toMianPage();
    DeviceEventEmitter.emit('refreshPageEvent'); // 刷新首页列表
    DeviceEventEmitter.emit('swipeToSearch', 'refresh');
    // this.getServerInfo(this.lotCode);
  }

  _toMianPage = () => {
    if (this.props.navigation) {
      this.props.navigation.goBack();
    } else {
      DeviceEventEmitter.emit('swiperIncidentPageEvent', -1);
    }
  }

  doWith = () => {
    if (this.state.data.lotCode) {
      const params = {
        ...this.state.data,
        _refresh: this._refresh,
      };
      global.navigation.navigate({ routeName: 'ChangePart', params });
    } else {
      UtilToast('没有换下件信息', 'danger');
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header_container}>
          <View style={{ flex: 1 }}>
            <TouchableWithoutFeedback onPress={this._toMianPage}>
              <View style={{ paddingLeft: 8, paddingRight: 8, paddingTop: 16, paddingBottom: 16 }}>
                <ZlstIcon
                  style={styles.backIcon}
                  name="fanhui"
                  size={20}
                  color="white"
                />
              </View>
            </TouchableWithoutFeedback>
          </View>
          <View style={{ flex: 1, alignItems: 'center' }}><Text style={styles.headerText}>零部件信息</Text></View>
          <View style={{ flex: 1 }} />

        </View>
        <ScrollView style={{ flex: 1 }}>
          <View>
            <View style={styles.title_container}><FormText name="基础信息" fontColor="black" /></View>
            <FormText name="编码" value={this.state.data.lotCode} />
            <FormText name="名称" value={this.state.data.materialName} />
            <FormText name="状态" value={this.state.data.lotStatus} />
            <FormText name="型号" value={this.state.data.materialSpecModel} />
            <FormText name="ABC分类" value={this.state.data.materialLevel} />
            <FormText name="供应商" value={this.state.data.supplierName} />
            <FormText name="生产厂商" value={this.state.data.manufacturerName} />
            <FormText name="所在仓库" value={this.state.data.warehouseName} />
            <View style={styles.title_container}><FormText name="换下件信息" fontColor="black" /></View>
            <FormText name="换下故障单" value={this.state.data.failureCode} />
            <FormText name="换下设备" value={this.state.data.equipmentName} />
            <FormText name="换下时间" value={this.state.data.operationTime} />
            <FormText name="维修人员" value={this.state.data.maintPersonName} />
            <FormText name="是否原装部件" value={this.state.data.firstTakedownFlag == 1 ? '是' : '否'} />
          </View>
        </ScrollView>
        <TouchableOpacity style={styles.footer} onPress={() => this.doWith()} activeOpacity={0.8}>
          <Image
            source={require('../../../../assets/images/btn-cut-line-xxx.png')}
            style={{ width: '100%', height: 2, alignItems: 'center' }}
            resizeMode="stretch"
            resizeMethod="auto"
          />
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{ color: 'white' }}>处理换下件</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: Theme.myPrimary,
  },
  title_container: {
    width: '100%',
    backgroundColor: 'white',
    borderLeftWidth: 8,
    borderLeftColor: '#4f6fe3',
    paddingTop: 4,
    paddingBottom: 4,
    // borderRadius: 4,
  },
  header_container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerText: {
    color: 'white',
    fontWeight: 'bold',
  },
  level: {
    marginRight: 8,
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 15,
    width: 20,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    width: '100%',
    flexDirection: 'column',
    backgroundColor: Theme.myPrimary,
    height: 48,
  },
});

export default changePartInfo;
